import React from "react";
import { FlatList, Linking, StyleSheet } from "react-native";
import { Dialog, Text, TouchableOpacity, View } from "react-native-ui-lib";
import { isAndroid, isIPhoneX } from "../../configs/platform";
import { commonStyles } from "../../configs/commonStyle";
import ListSeparator from "./ListSeparator";
import BasePage from "../BasePage";

/**
 * 导航对话框
 */
export default class NavigateDialog extends BasePage {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      startLocation: {
        latitude:28.207495518386697,
        longitude:112.87839999746214
      },
      menuList: [
        { label: '高德地图' },
        { label: '百度地图' },
      ],
      name:''
    };
  }

  show = (startLocation,name) => {
    this.setState({ isOpen: true, startLocation,name });
  };

  dismiss = () => {
    this.setState({ isOpen: false });
  };

  getStyle = (index) => {
    const { menuList } = this.state;
    if (index == 0) {
      return styles.top_item;
    } else if (index == menuList.length - 1) {
      return styles.bottom_item;
    }
  };

  openMaps = (index) => {
    if (index == 1) {
      this.jumpBaidu();
    } else {
      this.jumpGaode();
    }
    this.dismiss();
  };

  jumpBaidu=()=> {
    const {startLocation,name}=this.state;
    const {latitude,longitude} = startLocation;
    // let url = "baidumap://map/navi?location="+latitude+","+longitude+"&src=com.panda.delivery&coord_type=gcj02"
    let url = `baidumap://map/direction?destination=name:${name}|latlng:${latitude},${longitude}&coord_type=gcj02&src=com.panda.delivery`
    logger('百度定位地址',url)
    Linking.canOpenURL(url).then(supported => {
      if (!supported) {
        this.showToast('请先下载百度地图')
      } else {
        return Linking.openURL(url);
      }
    }).catch(err => console.error('An error occurred', err));
  }

  jumpGaode=()=> {
    const {startLocation,name}=this.state;
    const {latitude,longitude} = startLocation;
    // let url =`${isAndroid()?'androidamap':'iosamap'}://navi?sourceApplication=com.panda.delivery&lat=${latitude}&lon=${longitude}&dev=0&style=0`;
    let url =`${isAndroid()?'amapuri://route/plan/':'iosamap://path'}?sourceApplication=com.panda.delivery&dname=${name}&dlat=${latitude}&dlon=${longitude}&dev=0&t=0`;
    Log('高德导航地址',url);
    Linking.canOpenURL(url).then(supported => {
      if (!supported) {
        this.showToast('请先下载高德地图')
      } else {
        return Linking.openURL(url);
      }
    }).catch(err => console.error('An error occurred', err));
  }

  render_item = ({ item, index }) => {
    return (
      <TouchableOpacity style={this.getStyle(index)} activeOpacity={1} onPress={() => this.openMaps(index)}>
        <Text style={styles.text}>{item.label}</Text>
      </TouchableOpacity>
    );
  };

  renderFooter = () => {
    return (
      <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={this.dismiss}>
        <Text style={styles.text}>取消</Text>
      </TouchableOpacity>
    );
  };

  render() {
    const { isOpen, menuList } = this.state;
    return (
      <Dialog
        migrate
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        width={"98%"}
        bottom
        onDismiss={this.dismiss}
      >
        <View>
          <FlatList
            data={menuList}
            extraData={this.state}
            keyExtractor={(item, index) => "menu_" + index}
            renderItem={this.render_item}
            ListFooterComponent={this.renderFooter}
            ItemSeparatorComponent={() => <ListSeparator height={1} />}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: "transparent",
    marginBottom: isIPhoneX ? 0 : 20,
    borderRadius: 4,
  },
  content: {
    fontSize: 14,
    color: "#141414",
    lineHeight: 25,
    minHeight: 50,
    textAlign: "center",
  },
  top_item: {
    height: 56,
    borderTopLeftRadius: 14,
    borderTopRightRadius: 14,
    ...commonStyles.center,
    backgroundColor: "white",
  },
  bottom_item: {
    height: 56,
    borderBottomLeftRadius: 14,
    borderBottomRightRadius: 14,
    ...commonStyles.center,
    backgroundColor: "white",
  },
  item: {
    height: 56,
    ...commonStyles.center,
    backgroundColor: "white",
  },
  text: {
    color: "#007AFF",
    fontSize: 16,
  },
  cancelButton: {
    height: 56,
    ...commonStyles.center,
    borderRadius: 14,
    marginTop: 10,
    backgroundColor: "white",
  },
});


